<template>
	<view class="big_box">
		<view class="search">
			<u-search placeholder="搜索" v-model="keyword" @custom="searchMenu"></u-search>
		</view>
		<view class="menu">
			<view class="menu_item" v-for="item in menuData" :key="item.id" @click="go_menus(item)">
				<image :src="item.image" mode=""></image>
				<view class="text">
					{{ item.name }}
				</view>
			</view>
		</view>
		<view class="banner">
			<image src="/static/index_image/banner.png" mode="widthFix"></image>
		</view>
		<view class="notice">
			<u-notice-bar bgColor="#7dc5eb" color="#fff" :text="notice"></u-notice-bar>
		</view>
		<view class="list">
			<view class="list_item" v-for="item in listData" :key="item.id">
				<view class="left">
					<image :src="item.image" mode=""></image>
					<view class="sub_text">
						<view class="title">
							{{ item.name }}
						</view>
						<view class="desc">
							{{ item.descript }}
						</view>
					</view>
				</view>
				<u-button type="primary" class="custom-style" shape="circle" :plain="true"
					@click="go_add(item)">入群</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from "vuex";
	import api from '@/api/index.js'
	import {
		toLogin
	} from '../login/login.vue';
	export default {
		data() {
			return {
				keyword: '',
				menuData: [],
				notice: '本群是同城高质量搭子群，每天邀请大量女嘉宾进群，欢迎多来点高质量的男性，高质量人群入搭子群。聊天搭子，健身搭子，游戏搭子，运动搭子，吃饭搭子，电影搭子……',
				listData: []
			}
		},
		computed: mapGetters(['isLogin', 'uid', 'userInfo']),
		onLoad() {
			this.getUserinfo()
		},
		onShow() {
			const params = new URLSearchParams(window.location.search);
			let zhituiId = params.get('zhitui_id');
			if (!zhituiId) {
				const hashParams = window.location.hash.split('?')[1];
				if (hashParams) {
					const hashSearchParams = new URLSearchParams(hashParams);
					zhituiId = hashSearchParams.get('zhitui_id');
				}
			}
			if (!uni.getStorageSync('zhitui_id')) {
				uni.setStorageSync('zhitui_id', zhituiId)
			}
		},
		methods: {
			getUserinfo() {
				api.getUserinfo().then(res => {
					if (res.response.statusCode == 200) {
						this.getProvinceList();
						this.getGroupList();
					} else {
						uni.navigateTo({
							url:'/pages/login/login'
						})
					}
				}).catch(err => {
					console.error(err)
				})
			},
			//搜索
			searchMenu() {
				this.getProvinceList()
			},
			//获取省
			getProvinceList() {
				api.getProvinceList({
					keywords: this.keyword
				}).then(res => {
					if (res.response.statusCode == 200) {
						this.menuData = res.data.data
					}
				}).catch(err => {
					console.error(err)
				})
			},
			//获取群
			getGroupList() {
				api.getGroupList({
					cid: 1
				}).then(res => {
					if (res.response.statusCode == 200) {
						this.listData = res.data.data
					}
				}).catch(err => {
					console.error(err)
				})
			},

			//选择城市
			go_menus(item) {
				console.log(item, '选择城市')
				uni.navigateTo({
					url: '/pages/index/seach?data=' + JSON.stringify(item)
				})
			},
			//加群
			go_add(item) {
				console.log(item, '加群')
				uni.navigateTo({
					url: '/pages/index/pay?data=' + JSON.stringify(item)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@mixin flex-center-between {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	@mixin flex-center-column {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.big_box {
		padding: 1rem;

		.menu {
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			gap: 1rem 2.2rem;
			margin-top: 1.5rem;
			// justify-content: space-between;

			.menu_item {
				width: 12%;
				@include flex-center-column;

				image {
					width: 2.2rem;
					height: 2.2rem;
				}

				.text {
					font-size: 14px;
				}
			}
		}

		.banner {
			width: 100%;
			margin-top: 1.5rem;

			image {
				width: 100%;
			}
		}

		.list {
			display: flex;
			flex-direction: column;
			width: 100%;

			.list_item {
				@include flex-center-between;
				margin: 0.5rem 0;

				.left {
					display: flex;
					align-items: center;

					image {
						width: 3rem;
						height: 3rem;
						border-radius: 0.8rem;
					}

					.title {
						font-size: 1rem;
						font-weight: 600;
						color: #191919;
					}

					.desc {
						font-size: 0.8rem;
						color: #7e7e7e;
					}
				}

				.custom-style {
					width: 4rem;
					height: 1.5rem;
					line-height: 1.5rem;
					font-size: 0.8rem;
					margin: 0;
				}
			}
		}
	}
</style>